<html>
<head>
    <link rel="stylesheet" href="./chat.css">
</head>
<body>
    <div class="container">
        <!-- AI对话框 -->
        <div class="chat-container">
          <div class="chat-messages" id="chatMessages"></div>
          <div class="chat-input">
            <input type="text" id="userInput" placeholder="请输入您的问题...">
            <button id="sendBtn">发送</button>
          </div>
        </div>
        
        <!-- 表格iframe容器 (初始隐藏) -->
        <div class="form-container" id="formContainer">
          <iframe id="leaveForm" src="http://192.168.110.16:8080/main/renshi/kaoqing/qingjia" width="100%" height="600px"></iframe>
        </div>
    
        <!-- 添加表单控制按钮 -->
        <div class="form-controls">
          <button id="showFormBtn">显示请假表单</button>
          <button id="fillFormBtn">填充表单数据</button>
        </div>
    </div>

    <script>
      // 获取DOM元素
      const chatMessages = document.getElementById('chatMessages');
      const userInput = document.getElementById('userInput');
      const sendBtn = document.getElementById('sendBtn');
      const formContainer = document.getElementById('formContainer');
      const leaveForm = document.getElementById('leaveForm');
      const showFormBtn = document.getElementById('showFormBtn');
      const fillFormBtn = document.getElementById('fillFormBtn');
      
      // 初始化时隐藏表单
      formContainer.style.display = 'none';
      
      // 存储当前表单数据的状态
      let currentFormData = {};
      
      // 显示/隐藏表单按钮
      showFormBtn.addEventListener('click', function() {
        if (formContainer.style.display === 'none') {
          formContainer.style.display = 'block';
          showFormBtn.textContent = '隐藏请假表单';
        } else {
          formContainer.style.display = 'none';
          showFormBtn.textContent = '显示请假表单';
        }
      });
      
      // 填充表单数据按钮
      fillFormBtn.addEventListener('click', function() {
        sendFormData();
      });
      
      // 发送消息到iframe
      function sendFormData(customData) {
        // 默认表单数据
        const defaultData = {
          no: generateNo(),
          name: '张三',
          employeeId: 'EMP' + Math.floor(Math.random() * 10000).toString().padStart(4, '0'),
          department: '技术部',
          groupName: '前端开发组',
          level: 'P6',
          shift: '标准班',
          leaveType: '年假',
          workAgent: '李四',
          reason: '家庭旅行',
          plannedStartTime: new Date(Date.now() + 86400000).toISOString(), // 明天
          plannedEndTime: new Date(Date.now() + 86400000 * 5).toISOString(), // 5天后
          plannedDays: 5,
          plannedHours: 40,
          actualStartTime: new Date(Date.now() + 86400000).toISOString(),
          actualEndTime: new Date(Date.now() + 86400000 * 5).toISOString(),
          actualDays: 5,
          actualHours: 40,
          applicant: '张三',
          groupApproval: '待审批',
          departmentSupervisorApproval: '待审批',
          departmentManagerApproval: '待审批',
          directorApproval: '待审批',
          generalManagerApproval: '',
          presidentApproval: '',
          managementDepartmentApproval: ''
        };
        
        // 使用自定义数据、当前数据或默认数据
        const formData = customData || currentFormData;
        
        // 如果是首次发送或者没有当前数据，使用默认数据
        if (Object.keys(formData).length === 0) {
          Object.assign(formData, defaultData);
        }
        
        // 更新当前表单数据状态
        currentFormData = { ...formData };
        
        // 确保iframe已加载
        if (leaveForm.contentWindow) {
          try {
            // 使用iframe的源作为目标源，而不是使用'*'
            const targetOrigin = new URL(leaveForm.src).origin;
            console.log('发送消息到:', targetOrigin);
            
            // 发送消息到iframe
            leaveForm.contentWindow.postMessage(formData, targetOrigin);
            
            // 在聊天窗口显示消息
            addMessage('系统', '已向请假表单发送数据');
          } catch (error) {
            console.error('发送消息时出错:', error);
            addMessage('系统', '发送数据时出错: ' + error.message);
          }
        } else {
          addMessage('系统', '表单iframe尚未加载完成，请稍后再试');
        }
      }
      
      // 监听iframe的响应
      window.addEventListener('message', function(event) {
        console.log('收到来自 ' + event.origin + ' 的消息:', event.data);
        
        const data = event.data;
        
        // 检查是否是请假表单的响应
        if (data && data.type === 'qingjia-response') {
          addMessage('系统', `表单响应: ${data.message}`);
        }
      });
      
      // 在聊天窗口添加消息
      function addMessage(sender, message) {
        const messageElement = document.createElement('div');
        messageElement.className = 'message';
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }
      
      // 生成请假单编号
      function generateNo() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
        return `${year}${month}${day}${random}`;
      }
      
      // 发送按钮点击事件
      sendBtn.addEventListener('click', function() {
        const message = userInput.value.trim();
        if (message) {
          addMessage('用户', message);
          
          // 处理用户消息
          processUserMessage(message);
          
          // 清空输入框
          userInput.value = '';
        }
      });
      
      // 输入框回车事件
      userInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          sendBtn.click();
        }
      });
      
      // 处理用户消息
      function processUserMessage(message) {
        // 检查是否是修改表单字段的指令
        const fieldUpdate = extractFieldUpdate(message);
        
        if (fieldUpdate) {
          // 如果表单未显示，先显示表单
          if (formContainer.style.display === 'none') {
            formContainer.style.display = 'block';
            showFormBtn.textContent = '隐藏请假表单';
          }
          
          // 更新字段并发送
          const updatedData = { ...currentFormData, ...fieldUpdate };
          sendFormData(updatedData);
          
          // 反馈给用户
          const fieldNames = Object.keys(fieldUpdate).map(key => {
            const readableKey = getReadableFieldName(key);
            return `${readableKey}为"${fieldUpdate[key]}"`;
          }).join('、');
          
          addMessage('系统', `已更新表单字段：${fieldNames}`);
          return;
        }
        
        // 简单的关键词识别
        if (message.includes('请假') || message.includes('休假')) {
          // 显示表单
          formContainer.style.display = 'block';
          showFormBtn.textContent = '隐藏请假表单';
          
          // 根据消息内容提取信息
          const data = extractLeaveInfo(message);
          
          // 如果提取到信息，发送到表单
          if (Object.keys(data).length > 0) {
            sendFormData(data);
          }
          
          addMessage('系统', '已为您打开请假表单，您可以填写详细信息');
        } else {
          // 其他消息处理
          addMessage('系统', '您好，我是OA助手，有什么可以帮您的？');
        }
      }
      
      // 获取字段的可读名称
      function getReadableFieldName(key) {
        const fieldNameMap = {
          no: '编号',
          name: '姓名',
          employeeId: '工号',
          department: '部门',
          groupName: '组别',
          level: '级别',
          shift: '班次',
          leaveType: '假别',
          workAgent: '工作代理人',
          reason: '请假事由',
          plannedStartTime: '计划开始时间',
          plannedEndTime: '计划结束时间',
          plannedDays: '计划请假天数',
          plannedHours: '计划请假小时数',
          actualStartTime: '实际开始时间',
          actualEndTime: '实际结束时间',
          actualDays: '实际请假天数',
          actualHours: '实际请假小时数',
          applicant: '申请人',
          groupApproval: '班组审批',
          departmentSupervisorApproval: '部门主管审批',
          departmentManagerApproval: '部门经理审批',
          directorApproval: '部长/总监审批',
          generalManagerApproval: '总经理审批',
          presidentApproval: '总裁/董事长审批',
          managementDepartmentApproval: '企业管理部审批'
        };
        
        return fieldNameMap[key] || key;
      }
      
      // 从消息中提取字段更新信息
      function extractFieldUpdate(message) {
        const updates = {};
        
        // 字段映射表（中文名称到字段名的映射）
        const fieldMap = {
          '编号': 'no',
          '姓名': 'name',
          '工号': 'employeeId',
          '部门': 'department',
          '组别': 'groupName',
          '级别': 'level',
          '班次': 'shift',
          '假别': 'leaveType',
          '假种': 'leaveType',
          '请假类型': 'leaveType',
          '工作代理人': 'workAgent',
          '代理人': 'workAgent',
          '事由': 'reason',
          '原因': 'reason',
          '请假事由': 'reason',
          '请假原因': 'reason',
          '计划开始时间': 'plannedStartTime',
          '计划结束时间': 'plannedEndTime',
          '计划天数': 'plannedDays',
          '计划小时': 'plannedHours',
          '实际开始时间': 'actualStartTime',
          '实际结束时间': 'actualEndTime',
          '实际天数': 'actualDays',
          '实际小时': 'actualHours',
          '申请人': 'applicant',
          '班组': 'groupApproval',
          '部门主管': 'departmentSupervisorApproval',
          '部门经理': 'departmentManagerApproval',
          '部长': 'directorApproval',
          '总监': 'directorApproval',
          '总经理': 'generalManagerApproval',
          '总裁': 'presidentApproval',
          '董事长': 'presidentApproval',
          '企业管理部': 'managementDepartmentApproval'
        };
        
        // 匹配模式1：字段是值
        const pattern1 = /([\u4e00-\u9fa5\/]+)(?:是|为|改为|修改为|设置为|填写为|写成|改成)([^，。]+)/g;
        let match;
        while ((match = pattern1.exec(message)) !== null) {
          const fieldName = match[1].trim();
          const fieldValue = match[2].trim();
          
          if (fieldMap[fieldName]) {
            updates[fieldMap[fieldName]] = fieldValue;
          }
        }
        
        // 匹配模式2：把字段改为值
        const pattern2 = /(?:把|将)([\u4e00-\u9fa5\/]+)(?:改为|修改为|设置为|填写为|写成|改成)([^，。]+)/g;
        while ((match = pattern2.exec(message)) !== null) {
          const fieldName = match[1].trim();
          const fieldValue = match[2].trim();
          
          if (fieldMap[fieldName]) {
            updates[fieldMap[fieldName]] = fieldValue;
          }
        }
        
        // 特殊处理日期时间字段
        if (updates.plannedStartTime && !updates.plannedStartTime.includes('T')) {
          try {
            // 尝试解析日期时间
            const dateValue = parseChineseDateTimeString(updates.plannedStartTime);
            if (dateValue) {
              updates.plannedStartTime = dateValue.toISOString();
            }
          } catch (e) {
            console.error('解析计划开始时间失败:', e);
          }
        }
        
        if (updates.plannedEndTime && !updates.plannedEndTime.includes('T')) {
          try {
            const dateValue = parseChineseDateTimeString(updates.plannedEndTime);
            if (dateValue) {
              updates.plannedEndTime = dateValue.toISOString();
            }
          } catch (e) {
            console.error('解析计划结束时间失败:', e);
          }
        }
        
        if (updates.actualStartTime && !updates.actualStartTime.includes('T')) {
          try {
            const dateValue = parseChineseDateTimeString(updates.actualStartTime);
            if (dateValue) {
              updates.actualStartTime = dateValue.toISOString();
            }
          } catch (e) {
            console.error('解析实际开始时间失败:', e);
          }
        }
        
        if (updates.actualEndTime && !updates.actualEndTime.includes('T')) {
          try {
            const dateValue = parseChineseDateTimeString(updates.actualEndTime);
            if (dateValue) {
              updates.actualEndTime = dateValue.toISOString();
            }
          } catch (e) {
            console.error('解析实际结束时间失败:', e);
          }
        }
        
        return Object.keys(updates).length > 0 ? updates : null;
      }
      
      // 解析中文日期时间字符串
      function parseChineseDateTimeString(str) {
        // 尝试匹配常见的日期时间格式
        const datePattern = /(\d{4})[-\/年](\d{1,2})[-\/月](\d{1,2})[日]?\s*(\d{1,2})?[:时]?(\d{1,2})?[:分]?(\d{1,2})?[秒]?/;
        const match = str.match(datePattern);
        
        if (match) {
          const year = parseInt(match[1]);
          const month = parseInt(match[2]) - 1; // 月份从0开始
          const day = parseInt(match[3]);
          const hour = match[4] ? parseInt(match[4]) : 0;
          const minute = match[5] ? parseInt(match[5]) : 0;
          const second = match[6] ? parseInt(match[6]) : 0;
          
          return new Date(year, month, day, hour, minute, second);
        }
        
        // 如果是"明天"、"后天"等相对日期
        if (str.includes('明天')) {
          const tomorrow = new Date();
          tomorrow.setDate(tomorrow.getDate() + 1);
          return tomorrow;
        } else if (str.includes('后天')) {
          const dayAfterTomorrow = new Date();
          dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
          return dayAfterTomorrow;
        } else if (str.includes('今天')) {
          return new Date();
        }
        
        return null;
      }
      
      // 从消息中提取请假信息
      function extractLeaveInfo(message) {
        const data = {};
        
        // 提取姓名
        const nameMatch = message.match(/我是([\u4e00-\u9fa5]{2,4})/);
        if (nameMatch) {
          data.name = nameMatch[1];
          data.applicant = nameMatch[1];
        }
        
        // 提取请假类型
        const typeMatch = message.match(/(年假|事假|病假|婚假|产假|丧假|调休)/);
        if (typeMatch) {
          data.leaveType = typeMatch[1];
        }
        
        // 提取请假天数
        const daysMatch = message.match(/(\d+)天/);
        if (daysMatch) {
          data.plannedDays = parseInt(daysMatch[1]);
          data.actualDays = parseInt(daysMatch[1]);
        }
        
        // 提取请假原因
        const reasonMatch = message.match(/因为(.*?)(?:，|。|$)/);
        if (reasonMatch) {
          data.reason = reasonMatch[1];
        }
        
        return data;
      }
      
      // 初始化欢迎消息
      addMessage('系统', '欢迎使用OA系统，有什么可以帮您的？您可以直接说"姓名是张三"或"把部门改为技术部"来修改表单字段。');
    </script>

    <script type="text/javascript">
        var webSdkScript = document.createElement('script');
        webSdkScript.src = 'https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.5/libs/cn/index.js';
        document.head.appendChild(webSdkScript);
        webSdkScript.onload = function () {
          new CozeWebSDK.WebChatClient({
            "config": {
              "type": "app",
              "appInfo": {
                "appId": "7486666914035646505",
                "workflowId": "7486679564925829161"
              }
            },
            "auth": {
              "type": "token",
              "token": "pat_tKWwm4J8X7mTBkc6EZMPg72ZzMdp5n85SoFI593wKClDkvNF8GxHBuA4YrWVf63W",
              onRefreshToken: function () {
                return "pat_tKWwm4J8X7mTBkc6EZMPg72ZzMdp5n85SoFI593wKClDkvNF8GxHBuA4YrWVf63W"
              }
            }
          });
        }
    </script>
</body>
</html>
